var snowflakes = {
  arr: [], // 数组盛放元素
  snowflake: [
    //雪花类型
    "❉",
    "❈",
    "*",
    "✲",
    "❀",
    "❃",
  ],
  snowflakeColor: [
    //颜色库
    "white",
  ],
  random: function (num) {
    return Math.floor(Math.random() * num); // 获得一个num-1的整数
  },
  init: function (num) {
    // 最多个数
    this.maxlength = num;
    // 边界
    this.maxWidth =
      (document.documentElement.clientWidth || document.body.clientWidth) + 20;
    // 边界
    this.maxHeight =
      (document.documentElement.clientHeight || document.body.clientHeight) +
      20;
    this.create();
    this.move();
  },
  // 创建
  create: function () {
    var that = this;
    // 当数组中的数量，比最大数量要小的时候 开始创建
    if (that.arr.length < that.maxlength) {
      var d = document.createElement("div");
      // 内容和 颜色是随机的 颜色和文字库里面的
      d.innerHTML = that.snowflake[that.random(that.snowflake.length)];
      d.style.color =
        that.snowflakeColor[that.random(that.snowflakeColor.length)];
      d.style.position = "absolute";
      // 位置是随机的 top(0- -99) left (0 - that.maxWidth*2/3-1)
      d.style.left = Math.random() * that.maxWidth + "px";
      d.style.top = -that.random(100) + "px";
      // 速度
      d.vx = that.random(5);
      d.vy = 3 + that.random(5);
      // 数组添加元素, body 添加元素
      document.body.appendChild(d);
      that.arr.push(d);
    }
    requestAnimationFrame(this.create.bind(this));
  },
  // 运动
  move: function () {
    var that = this;
    var arr = that.arr;
    // 循环数组中的每一个元素
    for (var i = 0; i < arr.length; i++) {
      // 替换位置
      arr[i].style.left = arr[i].offsetLeft + arr[i].vx + "px";
      arr[i].style.top = arr[i].offsetTop + arr[i].vy + "px";
      // 判断边界 删除元素
      if (
        arr[i].offsetTop >= that.maxHeight ||
        arr[i].offsetLeft >= that.maxWidth
      ) {
        document.body.removeChild(arr[i]);
        arr.splice(i, 1);
      }
    }
    requestAnimationFrame(this.move.bind(this));
  },
};
window.onload = function () {
  snowflakes.init(100);
};
